<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <!-- 引入我们自己的首页样式文件 -->
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="shortcut icon" href="https://www.alibaixiu.cn/favicon.ico" />
    <title>阿里百秀</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <header class="col-md-2">
          <div class="logo">
            <a href="#">
              <img src="images/logo.png" alt="" class="hidden-xs" />
              <span class="visible-xs">阿里百秀</span>
            </a>
          </div>
          <div class="nav">
            <ul>
              <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
              <li>
                <a href="#" class="glyphicon glyphicon-picture">自然汇</a>
              </li>
              <li><a href="#" class="glyphicon glyphicon-phone">科技湖</a></li>
              <li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
              <li><a href="#" class="glyphicon glyphicon-glass">美食杰</a></li>
            </ul>
          </div>
        </header>
        <article class="col-md-7">
          <!-- 新闻模块 -->
          <!-- clearfix 清除浮动 (bootstrap定义好的类) -->
          <div class="news clearfix">
            <ul>
              <li>
                <a href="#">
                  <img src="./upload/lg.png" alt="" />
                  <p>阿里百秀</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./upload/1.jpg" alt="" />
                  <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./upload/2.jpg" alt="" />
                  <p>四川博物院《天路长歌_唐蕃古道沿线七省区精品文物联展》</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./upload/3.jpg" alt="" />
                  <p>重庆巫山：层林尽染入画来</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./upload/4.jpg" alt="" />
                  <p>探访海口美兰国际机场二期扩建项目</p>
                </a>
              </li>
            </ul>
          </div>
          <!-- 发表模块 -->
          <div class="publish">
            <div class="row">
              <div class="col-sm-9">
                <h3>世界真美 令人惊叹 卫星拍地球风景地貌</h3>
                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-29</p>
                <p class="hidden-xs">
                  猎杀与求生是动物在大自然的生存的技能，往往以一方胜利另一方失败告终。不过有研究人员在南欧一个岛上发现同归于尽的大自然奇观。
                </p>
                <p class="text-muted">
                  阅读(4999) 评论(86) 赞 (62)
                  <span class="hidden-xs"
                    >标签：世界 / 全球 / 卫星 / 地貌 / 真美</span
                  >
                </p>
              </div>
              <!-- hidden-xs这种写法  适用于超小盒子下 隐藏 图片 -->
              <div class="col-sm-3 pic hidden-xs">
                <img src="upload/11.jpg" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <h3>震惊！巨型蜈蚣遭毒蛇吞噬 穿肚而出同归于尽</h3>
                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                <p class="hidden-xs">
                  猎杀与求生是动物在大自然的生存的技能，往往以一方胜利另一方失败告终。不过有研究人员在南欧一个岛上发现同归于尽的大自然奇观。
                </p>
                <p class="text-muted">
                  阅读(4999)评论(64)赞 (62)
                  <span class="hidden-xs"
                    >标签：奇闻趣事 / 尸体 / 毒蛇 / 自然 / 蜈蚣</span
                  >
                </p>
              </div>
              <div class="col-sm-3 pic hidden-xs">
                <img src="upload/22.jpeg" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                <p class="hidden-xs">
                  之家是经常容易被人们忽略的一个部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里的知识吧！
                </p>
                <p class="text-muted">
                  阅读(2417)评论(4)赞 (52)
                  <span class="hidden-xs"
                    >标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 /
                    趣味生活</span
                  >
                </p>
              </div>
              <div class="col-sm-3 pic hidden-xs">
                <img src="upload/33.jpeg " alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <h3>警惕！这3种水果竟是胃病癌变的“催化剂”</h3>
                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                <p class="hidden-xs">
                  一年四季水果不断，但多吃对身体也不好，有没有发现吃得胃有些不舒服？建议一些“老胃病”应该少吃三种果儿。
                </p>
                <p class="text-muted">
                  阅读(2442)评论(16)赞 (15)
                  <span class="hidden-xs"
                    >标签：健康生活 / 山楂 / 水果 / 猕猴桃 / 结石 / 胃病</span
                  >
                </p>
              </div>
              <div class="col-sm-3 pic hidden-xs">
                <img src="upload/44.jpg " alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                <h3>竹子真的是大熊猫最爱吗？NO，国宝也吃肉</h3>
                <p class="text-muted">alibaixiu 发布于 2015-11-23</p>
                <p class="hidden-xs">
                  大多数人认为熊猫最爱吃的食物就是竹子，是食草动物。殊不知，大熊猫还是食肉动物。
                </p>
                <p class="text-muted">
                  阅读(3202)评论(8)赞 (17)
                  <span class="hidden-xs"
                    >标签：动物 / 吃肉 / 大熊猫 / 研究 / 竹子 / 肠道</span
                  >
                </p>
              </div>
              <div class="col-sm-3 pic hidden-xs">
                <img src="upload/55.jpeg " alt="" />
              </div>
            </div>
          </div>
        </article>
        <aside class="col-md-3">
          <a href="#" class="banner">
            <img src="upload/zgboke.jpg" alt="" />
          </a>
          <a href="#" class="hot">
            <span class="btn btn-primary">热搜</span>
            <h4 class="text-primary">欢迎加入中国博客联盟</h4>
            <p>
              这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......
            </p>
          </a>
        </aside>
      </div>
    </div>
  </body>
</html>
